<template>
    <div :class="[`${Notify.type.value}alert`, 'active']">
        <div>
            <v-alert :class="Notify.active.value ? 'active' : ''" :text="Notify.msg.value"
                :type="(Notify.type.value as any)"></v-alert>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Notify } from "./script/index";
</script>

<style lang="less" scoped>
.active {
    transform: translateY(0px) !important;
    visibility: visible;
}



.successalert {
    @wh: 5px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    visibility: hidden;
    // padding-inline: @wh;
    // padding-top: @wh;
    // margin-inline: auto;
    // width: 150px;


    // background-color: blue;

    .v-alert {
        padding: 8px 15px 8px 15px;
        transition: 250ms all ease;
        transform: translateY(-100px);
        color: black !important;
        background-color: #fff !important;

        :deep(.v-alert__prepend) {
            i {
                font-size: 16px !important;
                color: var(--win);
            }

            margin-right: 5px !important;
        }

        :deep(.v-alert__content) {
            font-size: 14px;
        }
    }
}


.warningalert {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    visibility: hidden;

    .v-alert {
        padding: 8px 15px 8px 15px;
        transition: 250ms all ease;
        transform: translateY(-100px);
        color: black !important;
        background-color: #faeeed !important;

        :deep(.v-alert__prepend) {
            i {
                font-size: 16px !important;
                color: #c7504a;
            }

            margin-right: 5px !important;
        }

        :deep(.v-alert__content) {
            font-size: 14px;
            color: #5e2d2a;
        }
    }
}
</style>
